<template>
    <div id="app">
        <div id="user_msg">
            <div class="title">
                <router-link to="/home"> < 个人中心</router-link>
                <p id="login">
                    <router-link to="" v-show="username=='未登录'" @click.native="log()"> 登录 </router-link>
                    <router-link to="" v-show="username!='未登录'"  @click.native="exit2()"> 退出 </router-link>
                </p>
            </div> 
            <div id="per">
                <!--此处引入头像背景-->
                <div id="img"><img src="../../public/img/small-cake1.png" alt=""></div>
                <div>
                    <p>{{username}}</p>
                    <!-- <p>1111</p> -->
                </div>
            </div>
        </div>

        <div class="bgc">
            <div id="money_msg">
                <router-link to=""><strong>￥0.00</strong><br> <span>我的余额</span></router-link>
                <router-link to=""><strong>0</strong><br>我的积分</router-link>
                <router-link to=""><strong>0</strong><br>代金券</router-link>
            </div>
            <div id="case">
                <h6><router-link to=""> <strong>我的订单</strong> <span>查看全部订单> </span> </router-link></h6>
                <div id="case_msg">
                    <router-link to=""><span class="iconfont icon-daifukuan"></span><br>待付款</router-link>
                    <router-link to=""><span class="iconfont icon-daifahuo"></span><br>待发货</router-link>
                    <router-link to=""><span class="iconfont icon-daishouhuo"></span><br>待收货</router-link>
                    <router-link to=""><span class="iconfont icon-pingjia"></span><br>评价</router-link>
                </div>
            </div>
            <div id="mid">
                <p><router-link to=""><span>我的收藏</span> <span> > </span></router-link></p>
                <p><router-link to=""><span>最近浏览</span> <span> > </span></router-link></p>
               <p> <router-link to=""><span>纪念日助手</span> <span> > </span></router-link></p>
                <p><router-link to=""><span>我的客服</span> <span> > </span></router-link></p>
            </div>
            <div id="bot">
                <p><router-link to="">意见反馈 <span> > </span></router-link></p>
                <p><router-link to="">设置 <span> > </span></router-link></p>
            </div>
            <footer id="copy"></footer>
        </div>
        <div class="ept"></div>
    </div>
</template>
<style lang="less" scoped>
    /*除了头部以下的部分*/
    .bgc{
        width:100% ;
        background: #ddd;
    }
    .bgc>div{
        width: 100%;
        background: white;
        padding: 15px;
        margin-bottom: 15px;
    }
    #user_msg{
        height: 13rem;
        background: #C25654;
        padding: 20px;
    }
    /*标题部分*/
    #user_msg .title{
        display: flex;
        padding-left: 15px;
        justify-content: space-between;
        margin: 10px 0 35px;
    }
    #user_msg .title>a{
        flex: 3;
        color: white;
        text-decoration: none;
        font-size: 20px;
    }
    #user_msg .title p{
        flex: 1;
    }
    /* 登录字体部分 */
    #user_msg .title p a{
        color: white;
        text-decoration: none;
        text-align: right;
        display: inline-block;
        margin-right: 12px;
        margin-top: 5px;
        float: right;
    }
    #user_msg #per{
        display: flex;
    }
    /* 用户头像部分 */
    #user_msg #per div:first-child{
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background: white;
        margin-left: 20px;
        margin-top: -20px;
        /* background: url("../../public/img/small-cake1.png") -15px no-repeat; */
    }
    #per #img img{
        width: 100%;
    }
    #user_msg #per div:last-child{
        padding-left: 15px;
        color: white;
    }
    #money_msg{
        width: 96%;
        height: 6rem;
        border-radius: 15px;
        background: white;
        margin: auto;
        position: relative;
        top: -25px;
        display: flex;
        padding: 20px;}
    #money_msg a{
        flex: 1;
        text-align: center;
        color: black;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-decoration: none;
    }
    #case h6{
        width: 100%;
        padding: 10px 0;
        border-bottom: 1px solid #ccc;
    }
    #case h6 a{
        display: flex;
        width: 100%;
        justify-content: space-between;
        color: black;
        text-decoration: none;
    }
    #case h6 a span{
        color: #ccc;
        font-size: 14px;
    }
    #case_msg{
        width: 100%;
        display: flex;
        justify-content: space-between;}
    #case_msg a{
        flex: 1;
        color: black;
        padding: 10px 10px 20px;
        text-align: center;
        height: 70px;
        text-decoration: none;
    }
    #mid p a,#bot p a{
        display: flex;
        justify-content: space-between;
        padding:5px 10px ;
        color: black;
        text-decoration: none;
    }
    .bgc footer{
        width: 100%;
        text-align:center ;
        font-size: 14px;
        color: #aaa;
        padding: 20px 0;
    }
    .ept{
        height: 55px;
    }
</style>
<script>
    import bus from '../bus.js'
    export default {
        name:'My',
        data(){
            return {
                username:'未登录',   //登录用户的用户名
            }
        },
        methods: {
                    log() {
                        location.href = '/view_login';
                        this.exit1 = true;
                    },
                    exit2() {
                        if (confirm("是否要退出登录？")) {
                                //退出登录，将用户名和购物车的数据传到数据库
                                this.$axios.post('http://localhost:3000/users', {username: localStorage.getItem('user'), shopCar: JSON.stringify(this.$store.state.shopCar) }).then((data) => {    
                                    console.log(data) 
                                // if(data.data.code==200){
                                //     localStorage.clear();
                                //     this.username = "未登录";
                                // }  
                                // localStorage.clear();
                                localStorage.removeItem("user");
                                localStorage.removeItem("shopCar")
                                this.username = "未登录";    
                            });
                        }
                    }
            // change() {
            //     if ($("#login a").html("登录")) {
            //         location.href = '/view_login'
            //     } else {
                    
            //         if (confirm("是否要退出登录？")) {
            //             localStorage.removeItem('user');
            //         this.username = "未登录"
            //         $("#login a").html("登录");
            //             //将本地数据上传到数据库
            //             this.$axios.post('http://localhost:3000/users',{username:localStorage.getItem('user'),shopCar:JSON.stringify(this.$store.state.shopCar)}).then((data)=>{
            //                 localStorage.clear();
            //             });
            //         }
                    
            //     }
            // }
        },
        mounted(){    
            // localStorage.clear();
            // console.log(localStorage['user']);  
            if(localStorage['user']!=null){   //如果本地中有值
                this.username = localStorage['user'];  //获取当前登录的用户名
                // localStorage.setItem("user")
                //发起axios请求，获取当前用户对应的购物车
            }
            // if(this.username!="未登录"){  //如果用户名不等于“未登录”
            //     $("#login a").html("退出");
            // }
        }
    
    }
</script>